<template>
  <div class="section">
    <div class="title-box flex">
      <p>编辑商品</p>
      <el-button type="primary" size="small" @click="install">保存设置</el-button>
    </div>

    <div class="centent-box">

      <el-tabs class="tabs-wrapper" v-model="tabsActiveName" type="card">

        <!-- 手机模型 -->
        <div class="phone-wrapper">
          <div class="phone-box">
            <img src="https://yunyi.ublue.xyz/admin/webSystem/phone.png" alt="">

            <div class="flex-d commonData-box">

              <!-- title -->
              <div class="commonData">
                <div class="commonData-title flex">
                  <p style="font-size:1.4rem">商品信息</p>
                </div>
              </div>

              <div class="commonData-box2 flex-d">
                <!-- 封面 -->
                <div class="commonData">
                  <div class="commonData-coverPicture flex"
                    :class="{ 'commonData-isCoverPicture': goodsForm.basics.coverPicture }">
                    <p v-if="goodsForm.basics.coverPicture.length == 0">请上传商品封面</p>
                    <el-carousel :autoplay=false v-else="goodsForm.basics.coverPicture.length!=0">
                      <el-carousel-item v-for="(item, index) in goodsForm.basics.coverPicture" :key="index">
                        <img :src="item.url" alt="">
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>

                <!-- info name -->
                <div class="commonData">
                  <div class="commonData-info flex-d">
                    <p class="p1">
                      ￥<span class="span1">{{ goodsForm.specification.data[0].money }}</span>
                      <span class="span2">￥{{ goodsForm.specification.data[0].skillMoney }}</span>
                    </p>

                    <p class="p2 flex">
                      <span class="span1">{{ goodsForm.basics.name ? goodsForm.basics.name : '请输入商品名称' }}</span>
                      <span class="span2">剩余{{ goodsFormSpecificationRepertoryAll }}件</span>
                    </p>
                  </div>
                </div>

                <!-- 商家信息 -->
                <div class="commonData">
                  <div class="commonData-merchants flex-d">
                    <div class="merchants-info flex">
                      <svg t="1667204097134" class="icon memerchants-img" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="17817" width="42" height="42">
                        <path
                          d="M632 992H172.8c-70.4 0-128-57.6-128-128V352c0-176 144-320 320-320h267.2c70.4 0 128 57.6 128 128v704c0 70.4-57.6 128-128 128z"
                          fill="#E1E1DF" p-id="17818"></path>
                        <path
                          d="M852.8 992H326.4c-70.4 0-128-57.6-128-128V336c0-70.4 57.6-128 128-128h526.4c70.4 0 128 57.6 128 128v528c0 70.4-57.6 128-128 128z"
                          fill="#4E8DF6" p-id="17819"></path>
                        <path d="M320 417.6a110.4 110.4 0 1 0 220.8 0 110.4 110.4 0 1 0-220.8 0Z" fill="#FFFFFF"
                          p-id="17820"></path>
                        <path
                          d="M875.2 606.4c-48-48-126.4-48-174.4 0L321.6 985.6l-6.4 6.4h536c70.4 0 128-57.6 128-128v-152l-104-105.6z"
                          fill="#2166CC" p-id="17821"></path>
                        <path
                          d="M731.2 992l-272-273.6c-48-48-126.4-48-174.4 0l-84.8 86.4V864c0 70.4 57.6 128 128 128h403.2z"
                          fill="#629FF9" p-id="17822"></path>
                      </svg>
                      <div class="memerchants-centent flex-d">
                        <p class="memerchants-name">店家名称</p>
                        <div class="flex">
                          <button class="button">
                            <p>资质认证</p>
                          </button>
                        </div>
                      </div>
                    </div>
                    <button class="button merchants-stores flex">
                      <p>查看线下门店</p>
                      <svg t="1662367013559" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9108" width="18" height="18">
                        <path
                          d="M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z"
                          p-id="9109" fill="#707070"></path>
                      </svg>
                    </button>
                  </div>
                </div>

                <!-- 图片详情 -->
                <div class="commonData">
                  <div class="commonData-detailsPage flex-d">
                    <svg v-if="goodsForm.basics.modFileList.length == 0" t="1667204097134" class="icon"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17817" width="42"
                      height="42">
                      <path
                        d="M632 992H172.8c-70.4 0-128-57.6-128-128V352c0-176 144-320 320-320h267.2c70.4 0 128 57.6 128 128v704c0 70.4-57.6 128-128 128z"
                        fill="#E1E1DF" p-id="17818"></path>
                      <path
                        d="M852.8 992H326.4c-70.4 0-128-57.6-128-128V336c0-70.4 57.6-128 128-128h526.4c70.4 0 128 57.6 128 128v528c0 70.4-57.6 128-128 128z"
                        fill="#4E8DF6" p-id="17819"></path>
                      <path d="M320 417.6a110.4 110.4 0 1 0 220.8 0 110.4 110.4 0 1 0-220.8 0Z" fill="#FFFFFF"
                        p-id="17820"></path>
                      <path
                        d="M875.2 606.4c-48-48-126.4-48-174.4 0L321.6 985.6l-6.4 6.4h536c70.4 0 128-57.6 128-128v-152l-104-105.6z"
                        fill="#2166CC" p-id="17821"></path>
                      <path
                        d="M731.2 992l-272-273.6c-48-48-126.4-48-174.4 0l-84.8 86.4V864c0 70.4 57.6 128 128 128h403.2z"
                        fill="#629FF9" p-id="17822"></path>
                    </svg>
                    <img v-else="goodsForm.basics.modFileList.length!=0" :src="item.url" alt=""
                      v-for="(item, index) in goodsForm.basics.modFileList" :key="index" />
                  </div>
                </div>
              </div>

              <!-- tabbar -->
              <div class="commonData">
                <div class="commonData-tabbar flex">
                  <div class="icon-wrapper flex">
                    <button class="button flex-d share">
                      <img src="http://gavin.ublue.xyz/assets/addons/marketing/static/img/icon/suspension_share.png"
                        alt="">
                      <p>分享</p>
                    </button>
                    <button class="button flex-d share">
                      <img src="http://gavin.ublue.xyz/assets/addons/marketing/static/img/icon/suspension_service.png"
                        alt="">
                      <p>客服</p>
                    </button>
                  </div>
                  <button class="btn button" id="buyBtn" @click="openGoodsbuy">立即抢购</button>
                </div>
              </div>

              <!-- 商品信息弹出 -->
              <div class="goodsbuy-wrapper" id="goodsbuy-wrapper">
                <div class="hide-on" @click="openGoodsbuy('hide')"></div>
                <div class="goodsbuy-content" id="goodsbuy-content">
                  <div class="goodsbut-centent2">
                    <div class="goodsinfo-box flex">
                      <div class="goodsinfo-left flex">
                        <svg v-if="!goodsForm.specification.data[goodsForm.specification.value.index].img"
                          t="1667204097134" class="icon goodsinfo-svg" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="17817" width="42" height="42">
                          <path
                            d="M632 992H172.8c-70.4 0-128-57.6-128-128V352c0-176 144-320 320-320h267.2c70.4 0 128 57.6 128 128v704c0 70.4-57.6 128-128 128z"
                            fill="#E1E1DF" p-id="17818"></path>
                          <path
                            d="M852.8 992H326.4c-70.4 0-128-57.6-128-128V336c0-70.4 57.6-128 128-128h526.4c70.4 0 128 57.6 128 128v528c0 70.4-57.6 128-128 128z"
                            fill="#4E8DF6" p-id="17819"></path>
                          <path d="M320 417.6a110.4 110.4 0 1 0 220.8 0 110.4 110.4 0 1 0-220.8 0Z" fill="#FFFFFF"
                            p-id="17820"></path>
                          <path
                            d="M875.2 606.4c-48-48-126.4-48-174.4 0L321.6 985.6l-6.4 6.4h536c70.4 0 128-57.6 128-128v-152l-104-105.6z"
                            fill="#2166CC" p-id="17821"></path>
                          <path
                            d="M731.2 992l-272-273.6c-48-48-126.4-48-174.4 0l-84.8 86.4V864c0 70.4 57.6 128 128 128h403.2z"
                            fill="#629FF9" p-id="17822"></path>
                        </svg>
                        <img v-else :src="goodsForm.specification.data[goodsForm.specification.value.index].img" />
                        <div class="goodsinfo-left-centent flex-d">
                          <p class="p1">￥<span id="goodsMoney">{{
                              goodsForm.specification.data[goodsForm.specification.value.index].money
                          }}</span></p>
                          <p class="p2" id="goodsName">{{
                              goodsForm.specification.data[goodsForm.specification.value.index].name ?
                                goodsForm.specification.data[goodsForm.specification.value.index].name :
                                '请输入规格名称'
                          }}</p>
                          <div class="num-box flex">
                            <button class="button goodsBtn1 flex" @click="goodsNum('0')">
                              <svg t="1667180760352" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7604" width="16" height="16">
                                <path d="M170.666667 469.333333h682.666666v85.333334H170.666667z" fill="#cfcfcf"
                                  p-id="7605"></path>
                              </svg>
                            </button>
                            <input type="number" v-model="phone.repertory" id="goodsNum"
                              @change="goodsNumInput(phone.repertory)"
                              :max="goodsForm.specification.data[goodsForm.specification.value.index].repertory"
                              min="0">
                            <button class="button goodsBtn2 flex" @click="goodsNum('1')">
                              <svg t="1667180790056" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="7902" width="16" height="16">
                                <path
                                  d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
                                  fill="#666666" p-id="7903"></path>
                              </svg>
                            </button>
                          </div>
                        </div>
                      </div>
                      <div class="goodsinfo-right flex">
                        <p>剩余{{ goodsForm.specification.data[goodsForm.specification.value.index].repertory }}件</p>
                      </div>
                    </div>
                    <p class="title">优惠券</p>
                    <div class="form form2 flex-d">
                      <div class="input-box flex">
                        <p>已选优惠券</p>
                        <div class="select" id="select2">
                          <span id="discountsRaidoVal">未选择优惠券</span>
                        </div>
                      </div>
                    </div>
                    <p class="title">订单信息</p>
                    <div class="form flex-d">
                      <div class="input-box flex">
                        <p>选择门店</p>
                        <div class="select" id="select">
                          <span id="stores">请选择门店</span>
                          <ul class="dropdown">
                            <li>南亚店</li>
                            <li>无锡店</li>
                            <li>芜湖店</li>
                          </ul>
                        </div>
                      </div>
                      <div class="input-box flex">
                        <p>姓名</p>
                        <input type="text" placeholder="请输入姓名" id="name">
                      </div>
                      <div class="input-box flex">
                        <p>电话号码</p>
                        <input type="tel" placeholder="请输入电话" id="tel">
                      </div>
                    </div>
                    <p class="title title2">选择规格</p>
                    <div class="input-box flex-d">
                      <div class="input-centent" v-for="(item, index) in goodsForm.specification.data" :key="item.id">
                        <input class="input" type="radio" name="goods" :id="item.id" :value="index"
                          v-model="goodsForm.specification.value.index">
                        <label :for="item.id" :data-name="item.name ? item.name : '请输入规格名称'"></label>
                      </div>
                    </div>
                  </div>
                  <button class="butBtn button">
                    立即支付&nbsp;&nbsp;￥<span id="goodsPrice"
                      :data-originalPrice="goodsForm.specification.data[goodsForm.specification.value.index].money"
                      :data-calculatePrice="goodsForm.specification.data[goodsForm.specification.value.index].money">{{
                          goodsForm.specification.data[goodsForm.specification.value.index].money
                      }}</span></button>
                </div>
                <div class="discounts-box">
                  <div class="discounts-centent">
                    <div class="hide-on" onclick="openDiscounts('hide')"></div>
                    <div class="discounts-content">
                      <div class="discounts flex">
                        <input type="radio" id="discountsRaido1" value="1" name="discountsRaido"
                          onclick="openDiscounts('hide')">
                        <label for="discountsRaido1" class="flex">
                          <div class="discounts-1 flex-d">
                            <p class="p1">￥<span>10</span></p>
                            <p class="p2">商品券</p>
                          </div>
                          <div class="discounts-2 flex-d">
                            <p class="p1">满19.9元可用</p>
                            <p class="p2">2022.7.22-2022.10.31</p>
                          </div>
                          <div class="discounts-3 flex-d">
                            <!--<p class="p1">暂不适用</p>-->
                          </div>
                        </label>
                      </div>
                      <div class="discounts flex">
                        <input type="radio" id="discountsRaido2" value="2" name="discountsRaidoNot">
                        <label for="discountsRaido2" class="flex not">
                          <div class="discounts-1 flex-d">
                            <p class="p1">￥<span>100</span></p>
                            <p class="p2">商品券</p>
                          </div>
                          <div class="discounts-2 flex-d">
                            <p class="p1">满19.9元可用</p>
                            <p class="p2">2022.7.22-2022.10.31</p>
                          </div>
                          <div class="discounts-3 flex-d">
                            <p class="p1">暂不适用</p>
                          </div>
                        </label>
                      </div>
                      <div class="discounts discounts2 flex">
                        <input type="radio" id="discountsRaidoNot" value="0" name="discountsRaido"
                          onclick="openDiscounts('hide')" checked>
                        <label for="discountsRaidoNot" class="flex">
                          <div class="discounts-1 flex-d">
                            <p class="p1">暂不使用优惠券</p>
                          </div>
                          <div class="discounts-3 flex">
                            <!--<p class="p1">暂不适用</p>-->
                          </div>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-tab-pane name="first">
          <span slot="label" @click="onSubmitGoodsForm(0)">
            <div class="p flex tabs">基础设置</div><img src="https://yunyi.ublue.xyz/admin/webSystem/step-arrow.9cd4791.gif"
              alt="">
          </span>
          <div class=" editor-box">
            <!-- <div class="title-box">基础设置
              <span>&nbsp;&nbsp;&nbsp;&nbsp;秒杀后3分钟内未付款则视为秒杀失败</span>
            </div> -->

            <div class="editor-info">
              <el-form :model="goodsForm.basics" :rules="goodsRules" ref="goodsForm0">

                <el-form-item label="商品名称：" prop="name" class="flex">
                  <el-input v-model="goodsForm.basics.name" size="small" placeholder="请输入商品名称，不能超过50字" maxlength="50"
                    clearable>
                  </el-input>
                </el-form-item>

                <el-form-item label="商品封面：" prop="coverPicture" class="flex">
                  <el-upload action="#" list-type="picture-card" :auto-upload="false" ref="goodsUpload"
                    :on-change="goodsUploadChange">
                    <i slot="default" class="el-icon-plus" id="goodsUploadISlot"></i>
                    <div style="width:100%;height:100%;font-size: 0;" slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="object-fit: contain;">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="goodsUploadRemovePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" @click="goodsUploadRemove()">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>

                <el-form-item label="商品详情：" prop="" class="flex">
                  <div class="editor-mod-box flex-d">

                    <div class="editor-mod-btns flex">
                      <el-upload action="#" :auto-upload="false" :file-list="goodsForm.basics.mod" list-type="picture"
                        multiple :on-change="goodsFormUp" id="goodsFormUp">
                        <el-button size="small" type="primary" icon="el-icon-picture"></el-button>
                      </el-upload>
                    </div>

                    <!-- <div class="editor-mods"></div> -->
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="second" id="el-tab-pame2">
          <span slot="label" @click="onSubmitGoodsForm(1)">
            <div class="p flex tabs">商品设置</div><img src="https://yunyi.ublue.xyz/admin/webSystem/step-arrow.9cd4791.gif"
              alt="">
          </span>
          <div class="editor-box">
            <div class="title-box">商品规格
              <span>&nbsp;&nbsp;&nbsp;&nbsp;设置商品的规格，若多个规格则添加多个商品规格 </span>
            </div>

            <div class="editor-info">
              <el-button type="primary" size="small" class="addSpecification" @click="addSpecification">添加项目规格
              </el-button>
              <el-form :model="goodsForm" :rules="goodsRules" :ref="item.id"
                v-for="(item, index) in goodsForm.specification.data" :key="index" class="specificationForm"
                :data-ref="item.id">

                <el-button type="danger" icon="el-icon-close" circle class="delBtn" size="mini"
                  @click="formModuleDel(item, index2)"></el-button>

                <div class="flex" style="width:100%;justify-content: flex-start;margin-bottom: 2rem;">
                  <el-form-item label="规格名称：" :prop="'specification.data.' + index + '.name'" :rules="goodsRules.name"
                    class="flex" style="margin-bottom:0;width: 50rem;">
                    <el-input v-model="item.name" size="small" placeholder="请输入商品名称，不能超过50字" maxlength="50" clearable>
                    </el-input>
                  </el-form-item>

                  <el-checkbox v-model="item.checked" style="padding-left:2rem">添加规格图片</el-checkbox>
                </div>

                <el-form-item v-if="item.checked" label="规格图片：" :prop="'specification.data.' + index + '.img'"
                  :rules="goodsRules.specificationCoverPicture" class="flex">
                  <el-upload action="#" list-type="picture-card" :auto-upload="false" :ref="'goodsUpload_' + index"
                    :limit=1 :on-change="(file, fileList) => specificationUploadChange(file, fileList, item, index)">
                    <i slot="default" class="el-icon-plus" :id="'goodsUploadISlot_' + index"></i>
                    <div style="width:100%;height:100%;font-size: 0;" slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="object-fit: contain;">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="goodsUploadRemovePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" @click="specificationUploadRemove(index)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>

                <div class="info2-box flex">
                  <el-form-item label="销售价格：" :prop="'specification.data.' + index + '.money'" :rules="goodsRules.money"
                    class="flex">
                    <el-input-number v-model="item.money" controls-position="right" size="small" :min="0">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="划线价格：" class="flex">
                    <el-input-number v-model="item.skillMoney" controls-position="right" size="small" :min="item.money">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="产品库存：" :prop="'specification.data.' + index + '.repertory'"
                    :rules="goodsRules.repertory" class="flex">
                    <el-input-number v-model="item.repertory" controls-position="right" size="small" :min="0">
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="限购次数：" class="flex">
                    <el-input-number v-model="item.limitingNum" controls-position="right" size="small" :min="0"
                      :max="item.repertory"></el-input-number>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="third" id="el-tab-pame3">
          <span slot="label" @click="onSubmitGoodsForm(2)">
            <div class="p flex tabs">购买设置</div><img src="https://yunyi.ublue.xyz/admin/webSystem/step-arrow.9cd4791.gif"
              alt="">
          </span>

          <div class="editor-box">
            <!-- <div class="title-box">购买设置
              <span>&nbsp;&nbsp;&nbsp;&nbsp;秒杀后3分钟内未付款则视为秒杀失败</span>
            </div> -->
            <div class="editor-info">
              <el-form :model="goodsForm.purchase" :rules="goodsRules.purchase" ref="goodsForm2"
                style="padding:1rem 1rem 1rem 0;">
                <el-form-item label="购买限制：" prop="limitingRadio" class="flex" style="margin-bottom: 2rem;">
                  <el-radio-group v-model="goodsForm.purchase.limitingRadio">
                    <el-radio :label="0">无限制</el-radio>
                    <el-radio :label="1">指定用户可够</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>

              <div class="editor-info-box">
                <div class="title-box">添加赠品
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;用户购买商品后，将会获得额外的赠品</span>
                  <span style="float:right">
                    <el-switch v-model="goodsForm.purchase.gift.checked" active-text="开" inactive-text="关">
                    </el-switch>
                  </span>
                </div>

                <el-collapse accordion :value="goodsForm.purchase.gift.checked ? 'true' : ''" class="collapse">
                  <el-collapse-item name="true">
                    <div class="editor-info">
                      <el-form :model="goodsForm.purchase" :rules="goodsRules.purchase" ref="">

                        <el-form-item label="直接赠送：" class="flex">
                          <el-button type="primary" size="small" plain
                            @click="goodsForm.purchase.gift.dialogVisible = true">
                            选择内容</el-button>
                        </el-form-item>
                        <el-form-item label="返现名额：" class="flex">
                          <el-button type="primary" size="small" plain
                            @click="goodsForm.purchase.gift.dialogVisible = true">选择内容</el-button>
                        </el-form-item>
                        <el-form-item label="送优惠券：" class="flex">
                          <el-button type="primary" size="small" plain
                            @click="goodsForm.purchase.gift.dialogVisible = true">选择内容</el-button>
                        </el-form-item>
                        <el-dialog title="提示" :visible.sync="goodsForm.purchase.gift.dialogVisible" width="30%">
                          <span>这是一段信息</span>
                          <span slot="footer" class="dialog-footer">
                            <el-button @click="goodsForm.purchase.gift.dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="goodsForm.purchase.gift.dialogVisible = false">确 定
                            </el-button>
                          </span>
                        </el-dialog>

                        <el-form-item label="赠送限制：" class="flex">
                          <el-radio-group v-model="goodsForm.purchase.gift.limitingRadio">
                            <el-radio :label="0">无限制</el-radio>
                            <el-radio :label="1">指定用户可够</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>

              <div class="editor-info-box">
                <div class="title-box">购买完成后跳转页面
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;用户购买完成后，将跳转到指定的页面</span>
                  <span style="float:right">
                    <el-switch v-model="goodsForm.purchase.goToURL.checked" active-text="开" inactive-text="关">
                    </el-switch>
                  </span>
                </div>

                <el-collapse accordion :value="goodsForm.purchase.goToURL.checked ? 'true' : ''" class="collapse">
                  <el-collapse-item name="true">
                    <div class="editor-info">
                      <el-form :model="goodsForm.purchase" :rules="goodsRules.purchase" ref="">
                        <el-form-item label="跳转页面：" class="flex">
                          <div class="flex-d" style="align-items: flex-start;">
                            <el-button type="primary" size="small" plain
                              @click="goodsForm.purchase.goToURL.dialogVisible = true">选择页面</el-button>
                            <div
                              style="width:100%;padding:0 1rem 1rem 1rem;box-sizing: border-box;border: 1px solid #DCDFE6;margin-top: 1rem;">
                              <el-table :data="goodsForm.purchase.goToURL.tableData" stripe style="width:99%;">
                                <el-table-column prop="name" label="名称" align="center">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" align="center">
                                  <template slot-scope="scope">
                                    <el-button type="text">删除</el-button>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>

                            <el-dialog title="提示" :visible.sync="goodsForm.purchase.goToURL.dialogVisible" width="30%">
                              <span>这是一段信息</span>
                              <span slot="footer" class="dialog-footer">
                                <el-button @click="goodsForm.purchase.goToURL.dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="goodsForm.purchase.goToURL.dialogVisible = false">确 定
                                </el-button>
                              </span>
                            </el-dialog>
                          </div>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>

              <div class="editor-info-box">
                <div class="title-box">购买完成添加标签
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;购买完成后，下单用户将会自动被打上用户标签</span>
                  <span style="float:right">
                    <el-switch v-model="goodsForm.purchase.label.checked" active-text="开" inactive-text="关">
                    </el-switch>
                  </span>
                </div>

                <el-collapse accordion :value="goodsForm.purchase.label.checked ? 'true' : ''" class="collapse">
                  <el-collapse-item name="true">
                    <div class="editor-info">
                      <el-form :model="goodsForm.purchase" :rules="goodsRules.purchase" ref="">

                        <el-form-item label="用户标签：" class="flex">
                          <el-button type="primary" size="small" plain
                            @click="goodsForm.purchase.label.dialogVisible = true">选择标签</el-button>
                          <el-dialog title="提示" :visible.sync="goodsForm.purchase.label.dialogVisible" width="30%">
                            <span>这是一段信息</span>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="goodsForm.purchase.label.dialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="goodsForm.purchase.label.dialogVisible = false">确 定
                              </el-button>
                            </span>
                          </el-dialog>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>

          </div>

        </el-tab-pane>
        <el-tab-pane name="fourth" id="el-tab-pame4">
          <span slot="label" @click="onSubmitGoodsForm(3)">
            <div class="p flex tabs">开始预热</div>
          </span>
          <div class="editor-box">
            <!-- <div class="title-box">购买设置
              <span>&nbsp;&nbsp;&nbsp;&nbsp;秒杀后3分钟内未付款则视为秒杀失败</span>
            </div> -->
            <div class="editor-info">
              <el-form :model="goodsForm.preheat" :rules="goodsRules" ref="goodsForm3"
                style="padding:1rem 1rem 1rem 0;">
                <el-form-item label="综合排序：" class="flex">
                  <el-input-number v-model="goodsForm.preheat.sort" controls-position="right" :min="0" size="small">
                  </el-input-number>
                  <span style="padding-left:1rem">数值越大越靠前</span>
                </el-form-item>
                <el-form-item label="销量：" class="flex" style="margin-bottom: 0rem;">
                  <el-input-number v-model="goodsForm.preheat.salesVolume" controls-position="right" :min="0"
                    size="small">
                  </el-input-number>
                </el-form-item>
              </el-form>
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>
<style lang="less" scoped src="./goodsEditor.less">

</style>
<script>
export default {
  name: 'goodsEditor',
  data() {
    const formFileRules = (rule, value, callback) => {
      if (!this.goodsForm.basics.coverPicture) {
        callback("请上传文件");
      }
      callback();
    }
    const specificationCoverPicture = (rule, value, callback) => {
      let index = rule.field.substring('specification.data.'.length, rule.field.indexOf('.img'))
      if (!this.goodsForm.specification.data[index].img) {
        callback("请上传文件");
      }
      callback();
    }
    return {
      phone: { repertory: 0 },
      // tabs
      tabsActiveName: 'first',
      // 表单
      goodsForm: {
        basics: { name: '', coverPicture: [], mod: [], modFileList: [] },
        specification: { value: { index: 0 }, data: [{ id: 'specification' + Date.now(), name: '', imgChecked: false, img: '', money: 0, skillMoney: 0, repertory: 0, limitingNum: 0 }] },
        purchase: {
          limitingRadio: 0,
          gift: { checked: false, limitingRadio: 0, dialogVisible: false },
          goToURL: {
            checked: false,
            tableData: [{
              name: '首页',
            }],
            dialogVisible: false
          },
          label: { checked: false, dialogVisible: false }
        },
        preheat: { sort: 0, salesVolume: 0 }
      },
      goodsRules: {
        purchase: { // 购买
          limitingRadio: [
            { required: true, message: '请选购买限制', trigger: 'change' }
          ],
        },
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        coverPicture: [
          { required: true, validator: formFileRules, trigger: 'change' }
        ],
        money: [
          { required: true, message: '请输入销售价格', trigger: 'blur' },
        ],
        repertory: [
          { required: true, message: '请输入产品库存', trigger: 'blur' },
        ],
        specificationCoverPicture: [
          { required: true, validator: specificationCoverPicture, trigger: 'change' }
        ],
      },
      goodsFormModDrag: { data: [], index: '' },
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  computed: {
    goodsFormSpecificationRepertoryAll: function () {
      let data = this.goodsForm.specification.data
      let allRepertory = 0
      for (let i = 0; i < data.length; i++) {
        allRepertory += parseInt(data[i].repertory)
      }
      return allRepertory
    }
  },
  mounted() {
    // this.$api.get_schema({ activity_id: 13 }).then(e => {
    //   this.lowCode.commonData = JSON.parse(e.data.replaceAll("&quot;", "\""))
    // })
  },
  methods: {
    /* 保存设置 */
    install() {
      this.onSubmitGoodsForm(4)
      // this.$api.set_schema({ activity_id: 13, schema: JSON.stringify(this.lowCode.commonData) }).then(e => {
      //   console.log(e);
      // })
    },
    /* tabs切换验证form */
    onSubmitGoodsForm(params, params2) {
      let _this = this
      let tabsDom = document.getElementsByClassName('tabs')

      // for (let i = 0; i < tabsDom.length; i++) {
      //   tabsDom[i].style.backgroundColor = ''
      //   tabsDom[i].style.border = ''
      //   tabsDom[i].style.color = ''
      // }
      for (let i = 0; i < params; i++) {
        if (i == 1) {
          let form = document.getElementsByClassName('specificationForm')
          for (let j = 0; j < form.length; j++) {
            _this.$refs[form[j].dataset.ref][0].validate().then(() => {
              successFn(tabsDom[i])
            }).catch(err => {
              errFn(tabsDom[i])
            });
          }
        } else {
          if (this.$refs['goodsForm' + i]) {
            this.$refs['goodsForm' + i].validate().then(() => {
              successFn(tabsDom[i])
            }).catch(err => {
              errFn(tabsDom[i])
            });
          }
        }
      }

      if (params != 4) {
        tabsDom[params].style.backgroundColor = ''
        tabsDom[params].style.border = ''
        tabsDom[params].style.color = ''
      }

      let successFn = tabsDom => {
        tabsDom.style.backgroundColor = '#67C23A'
        tabsDom.style.border = '1px solid #67C23A'
        tabsDom.style.color = '#fff'
      }
      let errFn = tabsDom => {
        tabsDom.style.backgroundColor = '#F56C6C'
        tabsDom.style.border = '1px solid #F56C6C'
        tabsDom.style.color = '#fff'
      }
    },
    /* goods封面上传按钮隐藏 */
    goodsUploadChange(fileList) {
      // document.getElementById(`goodsUploadISlot`).style.display = 'none'
      // let dom = document.getElementById(`goodsUploadISlot`).parentElement
      // dom.style.width = '0px'
      // dom.style.height = '0px'
      this.goodsForm.basics.coverPicture.push(fileList)
      this.$refs.goodsForm0.validate().catch(err => {
      });
    },
    /* goods封面删除 */
    goodsUploadRemove() {
      this.$refs.goodsUpload.clearFiles()
      // setTimeout(() => {
      //   document.getElementById(`goodsUploadISlot`).style.display = 'inline-block'
      //   let dom = document.getElementById(`goodsUploadISlot`).parentElement
      //   dom.style.width = '120px'
      //   dom.style.height = '120px'
      // }, 1100)
    },
    /* goods封面放大查看 */
    goodsUploadRemovePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /* goods详情上传 */
    goodsFormUp(file, fileList) {
      let _this = this
      this.goodsForm.basics.modFileList = fileList
      setTimeout(() => {
        let li = document.getElementById('goodsFormUp').getElementsByTagName('ul')[0].getElementsByTagName('li')
        for (let i = 0; i < li.length; i++) {
          li[i].draggable = 'true'
          li[i].ondragover = function (e) {
            e.preventDefault(); // 阻止默认行为
          }
          li[i].ondragstart = function () {
            // 记录第一个数据
            _this.goodsFormModDrag.data = fileList[i]
            _this.goodsFormModDrag.index = i
          }
          li[i].ondrop = function () {
            fileList[_this.goodsFormModDrag.index] = fileList[i] // 替换现在的
            fileList[i] = _this.goodsFormModDrag.data // 替换为第一个
            _this.goodsForm.basics.modFileList = fileList
            _this.$forceUpdate()
          }
        }
      }, 500);
      console.log(this.goodsForm);
    },
    /* 添加项目规格 */
    addSpecification() {
      this.goodsForm.specification.data.push({ id: 'specification' + Date.now(), name: '', imgChecked: false, img: '', money: 0, skillMoney: 0, repertory: 0 })
    },
    /* 规格图片添加 */
    specificationUploadChange(file, fileList, item, index) {
      document.getElementById(`goodsUploadISlot_${index}`).style.display = 'none'
      let dom = document.getElementById(`goodsUploadISlot_${index}`).parentElement
      dom.style.width = '0px'
      dom.style.height = '0px'
      item.img = fileList[0].url
      this.$refs[item.id][0].validate().catch(err => {
      });
    },
    /* 规格图片删除 */
    specificationUploadRemove(index) {
      console.log(this.$refs[`goodsUpload_${index}`]);
      this.$refs[`goodsUpload_${index}`][0].clearFiles()
      setTimeout(() => {
        document.getElementById(`goodsUploadISlot_${index}`).style.display = 'inline-block'
        let dom = document.getElementById(`goodsUploadISlot_${index}`).parentElement
        dom.style.width = '120px'
        dom.style.height = '120px'
      }, 1100)
    },
    /* 弹出商品购买信息 */
    openGoodsbuy(params) {
      if (params == 'hide') {
        document.getElementById('buyBtn').classList.add('disable')
        document.getElementById('goodsbuy-wrapper').classList.add('disable')
        document.getElementById('goodsbuy-content').style.bottom = '-100%'
        setTimeout(() => {
          document.getElementById('goodsbuy-wrapper').style.opacity = 0
          document.getElementById('goodsbuy-wrapper').style.visibility = 'hidden'
          document.getElementById('goodsbuy-wrapper').classList.remove('disable')
          document.getElementById('buyBtn').classList.remove('disable')
        }, 300);
      } else {
        document.getElementById('buyBtn').classList.add('disable')
        document.getElementById('goodsbuy-wrapper').firstElementChild.classList.add('disable')
        document.getElementById('goodsbuy-wrapper').style.opacity = 1
        document.getElementById('goodsbuy-wrapper').style.visibility = 'visible'
        document.getElementById('goodsbuy-content').style.bottom = '0%'
        setTimeout(() => {
          document.getElementById('goodsbuy-wrapper').firstElementChild.classList.remove('disable')
          document.getElementById('buyBtn').classList.remove('disable')
        }, 300);
      }
    },
    /* 商品加减 */
    goodsNum(params) {
      let val = this.phone.repertory
      let max = this.goodsForm.specification.data[this.goodsForm.specification.value.index].repertory

      if (params == 1) {
        if (val < max) {
          val += 1
        }
      } else if (params == 0) {
        if (val > 1) {
          val -= 1
        }
      }
      this.phone.repertory = val
      this.goodsNumInput(val, params)
    },
    /* 监听商品数量输入 */
    goodsNumInput(val, params) {
      let _this = this
      let max = _this.goodsForm.specification.data[_this.goodsForm.specification.value.index].repertory
      if (val > 1) {
        document.getElementsByClassName('goodsBtn1')[0].style.backgroundColor = '#cccccc'
        document.getElementsByClassName('goodsBtn2')[0].style.backgroundColor = '#cccccc'
        document.getElementsByClassName('goodsBtn1')[0].getElementsByTagName('path')[0].style.fill = '#666666'
        document.getElementsByClassName('goodsBtn2')[0].getElementsByTagName('path')[0].style.fill = '#666666'
        if (val == max || val >= max) {
          document.getElementsByClassName('goodsBtn1')[0].style.backgroundColor = '#cccccc'
          document.getElementsByClassName('goodsBtn2')[0].style.backgroundColor = '#ebebeb'
          document.getElementsByClassName('goodsBtn1')[0].getElementsByTagName('path')[0].style.fill = '#666666'
          document.getElementsByClassName('goodsBtn2')[0].getElementsByTagName('path')[0].style.fill = '#cfcfcf'
        }
      } else if (val == 1 || val == 0 || val < 1) {
        document.getElementsByClassName('goodsBtn1')[0].style.backgroundColor = '#ebebeb'
        document.getElementsByClassName('goodsBtn2')[0].style.backgroundColor = '#cccccc'
        document.getElementsByClassName('goodsBtn1')[0].getElementsByTagName('path')[0].style.fill = '#cfcfcf'
        document.getElementsByClassName('goodsBtn2')[0].getElementsByTagName('path')[0].style.fill = '#666666'
        if (val == max || max == 0) {
          document.getElementsByClassName('goodsBtn1')[0].style.backgroundColor = '#ebebeb'
          document.getElementsByClassName('goodsBtn2')[0].style.backgroundColor = '#ebebeb'
          document.getElementsByClassName('goodsBtn1')[0].getElementsByTagName('path')[0].style.fill = '#cfcfcf'
          document.getElementsByClassName('goodsBtn2')[0].getElementsByTagName('path')[0].style.fill = '#cfcfcf'
        }
      }

      if (val >= max) {
        _this.phone.repertory = max
        _this.$message({
          message: '库存不足,最多选择' + max + '件',
          type: 'warning'
        });
      } else if (val <= 1) {
        if (max != 0) {
          _this.phone.repertory = 1
          _this.$message({
            message: '最少选择一件',
            type: 'warning'
          });
        } else {
          _this.phone.repertory = 0
          _this.$message({
            message: '不能少于0件',
            type: 'warning',
          });
        }
      }

      // let originalPrice = $('#goodsPrice').attr('data-originalPrice') // 原价
      // let goodsPrice = (originalPrice * val).toFixed(1) // 数量计算之后的价格
      // console.log('originalPrice', originalPrice)
      // console.log('goodsPrice', goodsPrice)
      // $('#goodsPrice').attr('data-calculatePrice', goodsPrice)
      // $('#goodsPrice').html(goodsPrice)
      // openDiscounts('hide')
    },
  }
}
</script>
